<template>
  <div>
    <div>
      <div class="box1">

        <img class="zz" src="/User-Img/1.jpg" />
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          {{ tip }}
        </van-notice-bar>
      </div>

      <div class="ttt">
        <!-- 轮播图 -->
        <div class="box2">
          <van-swipe style="height: 200px" :autoplay="3000">
            <van-swipe-item v-for="(item, index) in imgList" :key="index">
              <img style="height: 200px" v-lazy="item.carouselmap" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 内容区域 -->
        <div class="box3">
          <van-card
            :num="item.count"
            tag="创世"
            :price="item.sell"
            :desc="item.name"
            title="藏品信息"
            :thumb="item.imgsrc"
            origin-price="10.00"
            v-for="item in Collections"
            :key="item.id"
            @click="goshiop(item.id)"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import AnnouncementApi from "@/api/Announcement/AnnouncementApi";
import CarouselmapApi from "@/api/Carouselmap/CarouselmapApi";
import QqntiqueauthApi from "@/api/Qqntiqueauth/QqntiqueauthApi";
export default {
  name: "Index",
  data() {
    return {
      tip: "技术是开发它的人的共同灵魂。",
      imgList: [],
      Collections: [],
    };
  },
  created() {
    this.queryTip();
    this.queryImg();
    this.queryStatus1();
  },
  methods: {
    queryTip() {
      AnnouncementApi.queryAnnouncementList().then((res) => {
        // console.log(res.data)
        this.tip = res.data.data.content;
      });
    },
    queryImg() {
      CarouselmapApi.queryCarouselmapList().then((res) => {
        // console.log(res.data.data);
        this.imgList = res.data.data;
      });
    },
    queryStatus1() {
      QqntiqueauthApi.listCollectionStatus1().then((res) => {
        // console.log(res.data.data);
        this.Collections = res.data.data;
      });
    },
    goshiop(id) {
      console.log(id);
      localStorage.setItem("cId", id);
      this.$router.push({
        name: "Shop",
      });
    },
  },
};
</script>

<style scoped>
.box1,
.box2 {
  padding: 10px;
}
.box3 {
  padding: 0 10px;
}

.zz {
  width: 141px;
  margin-left: 3px;
  margin-bottom: 4px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.ttt {
    height: 583px;
    overflow: scroll;
}
</style>